<p-growl [value]="msgs"></p-growl>

<h3 class="first">Basic</h3>
<p-tree [value]="filesTree1"></p-tree>

<h3>Single Selection</h3>
<p-tree [value]="filesTree2" selectionMode="single" [(selection)]="selectedFile" 
    (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"></p-tree>
<div style="margin-top:8px">Selected Node: {{selectedFile ? selectedFile.label : 'none'}}</div>

<h3>Lazy Loading</h3>
<p-tree [value]="lazyFiles" (onNodeExpand)="nodeExpand($event)" [style]="{'max-height':'200px','overflow':'auto'}"></p-tree>

<h3>Context Menu</h3>
<p-tree [value]="filesTree3" selectionMode="single" [(selection)]="selectedFile2" [contextMenu]="cm"></p-tree>

<p-contextMenu #cm [model]="items"></p-contextMenu>
